<template>
  <a-form ref="Form" v-bind="options.bind" v-on="options.vOn">
    <a-row>
      <a-col :span="getOffset(options)" />
      <a-col :span="24 - getOffset(options) * 2">
        <a-row>
          <template v-for="(item, key) in options.formModel">
            <a-col
              :key="key"
              v-if="item.show.value"
              :span="getSpan(item, options)"
            >
              <a-form-item v-bind="item.bind">
                <slot
                  v-if="$slots[key]"
                  :name="[key]"
                  :bind="item.attrs.bind"
                  :vOn="item.attrs.vOn"
                  :model="model"
                />
                <component
                  v-else
                  :is="item.template"
                  v-bind="item.attrs.bind"
                  v-model:value="model[key]"
                  v-model:checked="model[key]"
                  v-on="item.attrs.vOn"
                />
              </a-form-item>
            </a-col>
          </template>
        </a-row>
      </a-col>
      <a-col :span="getOffset(options)" />
    </a-row>
    <a-form-item v-bind="options.buttonOptions.bind">
      <a-space>
        <a-button
          v-for="(item, key) in buttonList"
          :key="key"
          v-bind="item.bind"
          v-on="item.vOn || {}"
        >
          {{ item.bind.text }}
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>
<script>
export default {
  name: "MsuiForm"
};
</script>
<script setup>
import { ref, onMounted, computed } from "vue";
const Form = ref(null);
const props = defineProps({
  options: {
    type: Object,
    required: true,
  },
});
const model = computed(() => props.options.bind.model)
const buttonList = computed(() => props.options.buttonOptions.buttonList)
onMounted(() => {
  props.options.vm = Form.value;
});
function getSpan(cur, par) {
  if (window.outerWidth < 500) {
    return 24;
  }
  if (cur.bind.span) {
    return cur.bind.span;
  }
  if (par.bind.span) {
    return par.bind.span;
  }
  return 24;
}
function getOffset(cur) {
  if (window.outerWidth < 500) {
    return 0;
  }
  if (cur.bind.offset) {
    return cur.bind.offset;
  }
  return 0;
}
</script>
